<template>
 <el-container>
  <headers></headers>

  <el-main>
   <div class="userForm">
    <div class="title">
     {{ $t('reset.title') }}

     <i class="back el-icon-back formBack" @click="goBack"></i>
    </div>

    <email></email>
   </div>
  </el-main>
 </el-container>
</template>

<script>
import Headers from "@/layout/Headers/Headers";  // 公共头部
import Email from "@/views/Reset/Email/Email";  // 邮箱注册

export default {
 name: "Register",
 data: () => ({
  logo: require('@/assets/logo.png'),
 }),
 components: {
  Headers,
  Email
 },
 methods: {
  // 返回上一页
  goBack() {
   this.$router.go(-1)
  }
 }
}
</script>

<style scoped lang="scss">
.el-container {
 width: 100%;
 min-height: 100vh;
 background-color: #f5faff;
 display: flex;
 flex-direction: column;
 padding-top: 50px;

 .el-main {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1 1 auto;
  height: 1%;
  padding: 50px 0;

  .userForm {
   width: 600px;
   overflow: hidden;
   -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
   box-shadow: 0 0 20px rgba(0,0,0,.2);
   background: #ffffff url('../../assets/logo.png') left 40px top 30px no-repeat;
   background-size: 50px;
   color: #002445;
   padding: 40px 60px;

   .title {
    display: flex;
    align-items: center;
    padding-left: 50px;
    font-weight: 700;
    color: #002445;
    font-size: 30px;
    justify-content: space-between;
    position: relative;

    img {
     width: 45px;
    }

    i {
     width: 30px;
     height: 30px;
     font-size: 30px;
     position: absolute;
     right: 0;
     top: 0;
     color: #fff;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     background-color: #0d4fa5;
     border: 1px solid #0d4fa5;
     border-radius: 30px;
     padding: 4px;
     font-weight: 400;
     cursor: pointer;
     transition: .3s;

     &:hover {
      background-color: transparent;
      color: #333;
      transition: .3s;
     }
    }
   }
  }
 }
}
</style>
